<template>
    <div id="max">
        <div id="top">
            <div id="top-1">
                <div id="small-box"></div>
                <div>处理时限设置</div>
            </div>
            <div id="neiRong1">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="date" label="" style="width: 20%" align="center" />
                    <el-table-column prop="mijie" label="密接者" style="width: 20%" align="center" />
                    <el-table-column prop="cimi" label="次密接者" style="width: 20%" align="center" />
                    <el-table-column prop="yiban" label="一般接触" style="width: 20%" align="center" />
                </el-table>
            </div>
        </div>
        <div id="mid">
            <div id="mid-2">
                <span id="small-box"></span>
                <span>消息预警时限设置</span>
            </div>

            <div id="neiRong2">
                <div id="shang">
                    <div id="shang-1">任务截止日期前</div>
                    <div>
                        <el-input v-model="input1" class="w-50 m-2" size="large" placeholder="请输入" />
                    </div>
                    <div id="shang-2">分钟</div>
                </div>
                <div id="xia">
                    <div id="xia-1">居家监测结束日期</div>
                    <div>
                        <el-input v-model="input2" class="w-50 m-2" size="large" placeholder="请输入" />
                    </div>
                    <div id="xia-2">小时</div>
                </div>
            </div>
        </div>
        <div id="bottom">
            <div id="bottom-3">
                <span id="small-box"></span>
                <span>居家隔离时效设置</span>
            </div>
            <div id="neiRong3">
                <div id="xia">
                    <div id="xia-1">转居家隔离后</div>
                    <div>
                        <el-input v-model="input3" class="w-50 m-2" size="large" placeholder="请输入" />
                    </div>
                    <div id="xia-2">天</div>
                </div>
            </div>
        </div>
        <div id="anNiu">
        <el-button type="primary">保存设置</el-button>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue';

export default defineComponent({
    name: 'shixiaoshezhi',
    setup() {

        const input1=ref('');
        const input2=ref('');
        const input3=ref('');

        const tableData = [
            {
                date: '疾控核实任务时限',
                mijie: '6小时',
                cimi: '12小时',
                yiban:'24小时',
            },
            {
                date: '120转运任务时限',
                mijie: '6小时',
                cimi: '12小时',
                yiban:'24小时',
            },

        ]
        return {
            tableData,
            input1,
            input2,
            input3,
        }
    }

})

</script>
<style scoped>
#anNiu{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 220px 0;
}
button{
    width: 115px;
    height: 40px;
}
#max {
    padding-top: 50px;
    display: flex;
    background-color: white;
    flex-direction: column;
    width: 100%;
    font-size: 13px;
    color: #333;
}

#small-box {
    height: 18px;
    width: 5px;
    background-color: #2b85e4;
    margin: 0 20px;
}

#top {
    display: flex;
    flex-direction: column;
}

#top-1 {
    display: flex;
    flex-direction: row;
}

#neiRong1 {
    padding: 20px;
}

#mid {
    display: flex;
    flex-direction: column;
}

#mid-2 {
    display: flex;
    flex-direction: row;
}

#neiRong2 {
    padding: 20px;
    display: flex;
    flex-direction: column;

}

#shang {
    display: flex;
    flex-direction: row;
}
#shang-1{
    display: flex;
    justify-content: start;
    align-items: center;
    width: 180px;
}
#shang-2{
    display: flex;
    justify-content: start;
    align-items: center;
    width: 180px;
    padding-left: 10px;
}
#xia {
    display: flex;
    flex-direction: row;
}
#xia-1{
    display: flex;
    justify-content: start;
    align-items: center;
    width: 180px;
}
#xia-2{
    display: flex;
    justify-content: start;
    align-items: center;
    width: 180px;
    padding-left: 10px;
}
#bottom {
    flex-direction: column;
    display: flex;
}

#bottom-3 {
    display: flex;
    flex-direction: row;
}

#neiRong3 {
    padding: 20px;
    display: flex;
}</style>